<template>
<!-- 课程卡片组件 -->
  <div class="card mb-4 shadow-sm">
    <img class="img-fluid" :src="course.image"/>
    <div class="card-body">
      <p class="card-text">{{ course.summary }}</p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <router-link :to="'/detail?id=' + course.id" class="btn btn-outline-secondary">课程详情</router-link>
        </div>
        <small class="text-muted">
          <span class="badge badge-info"><i class="fa fa-yen" aria-hidden="true">{{course.price}}</i></span>
          &nbsp;
          <span class="badge badge-info"><i class="fa fa-user" aria-hidden="true">{{course.enroll}}</i></span>
          &nbsp;
          <span class="badge badge-info">{{ getLevelOptionKV(course.level)}}</span>
        </small>
      </div>
    </div>
  </div>
</template>

<script>
import Filter from "@/filter/filter";
import {onMounted, ref} from "vue";

export default {
  name: "the-course",
  props: {
    course: Object,
  },

  setup() {
    const COURSE_LEVEL_REF = ref();

    /**
     * 渲染课程水平
     * @param level
     * @returns {*}
     */
    const getLevelOptionKV = (level) => {
      return Filter.optionKV(COURSE_LEVEL_REF.value, level)
    }

    onMounted(() => {
      COURSE_LEVEL_REF.value = COURSE_LEVEL;
    })

    return {
      getLevelOptionKV
    }
  }
}
</script>

<style scoped>

</style>